<template>
  <div class="azm-poster-canvas maxWidth500 azm-fixed-top" @mousewheel="handleMousewheel">
    <div class="azm-scroll">
      <mu-paper :zDepth="20" id="posterCanvasContainer"
                :style="{height: `${posterHeight}px`,width:`${scaleWidth}%`}">
        <div class="posterModel clearfix" v-if="editShow">
          <vue-svg-draggable-resizable :scaling="scale"></vue-svg-draggable-resizable>
        </div>
        <svg id="posterSvg" width="100%" height="100%" :viewBox="`0 0 ${model.w} ${model.h}`"></svg>
      </mu-paper>
    </div>
    <footer>
      <van-stepper class="azm-stepper clearfix" v-model="scale" integer :min="10" :max="100" :step="2"></van-stepper>
    </footer>
  </div>
</template>

<script>
  // import { QRCode } from '../../tools/qrcode/qrcode.min'
  //
  // debugger

  import device from '../../libs/device'
  import { Stepper } from 'vant'
  import RichTextEditor from '../../components/richTextEditor'
  import { Paper } from 'muse-ui'
  import { mapState } from 'vuex'
  import config from '../../libs/config'
  import Deploy2style from '../../libs/deploy2style'

  import VueDraggableResizable from 'vue-draggable-resizable'
  import VueSvgDraggableResizable from '../../components/vue-svg-draggable-resizable/svg-canvas'
  import io from 'socket.io-client'

  import SVG from 'svg.js'
  import '../../tools/SvgJsPlugins/svg.draggable.es6.js'

  const PROXY_URL = `${config.host}/nodeapi/proxy_image?url=`

  const TEXT_SCALE = 0.89

  let ScaleTimer = null
  let ScrollTimer = null

  let defaultScale = 90
  let defaultHeightStatus = true
  export default {
    components: {
      [Paper.name]: Paper,
      [Stepper.name]: Stepper,
      [RichTextEditor.name]: RichTextEditor,
      'vue-draggable-resizable': VueDraggableResizable,
      'vue-svg-draggable-resizable': VueSvgDraggableResizable
    },
    watch: {
      scale (n, o) {
        let that = this
        that.handleResize()
      }
    },
    data () {
      return {
        editShow: false,
        socket: null,
        socketStatus: false,
        message: '',
        isHH: false,
        options: {
          vuescroll: {
            mode: 'slide',
            scroller: {
              bouncing: true,
              locking: true
            },
            zooming: false
          },
          scrollPanel: {
            scrollingY: true,
            scrollingX: false,
            speed: 800,
          },
          bar: {
            keepShow: false,
            opacity: 0,
            background: 'rgb(3, 185, 118)',
            showDelay: 500
          },
          rail: {
            keepShow: false,
            opacity: 0,
            background: '#01a99a',
          }
        },
        model: {
          'image': 'http://app.mmtcapp.com/static/upload/image/20181101/20181101142548_13480.png',
          'title': '美容',
          'w': 750,
          'h': 1200,
          'background': 'http://app.mmtcapp.com/static/upload/image/20181101/20181101142553_64410.png'
        },
        configList: [
          {
            'id': '1418',
            'type': '0',
            'content': 'A delicate woman, at least, knows how to please herself',
            'image': '',
            'status': '1',
            'vertical_align': 'center',
            'basic': {
              'x': '0px',
              'y': '1011px',
              'w': '750px',
              'h': '18px',
              'z_index': '1',
              'color': '#ffffff',
              'font_size': '17px',
              'line_height': '40px',
              'text_align': 'center'
            },
            'customize': {
              'rotate': '0',
              'opacity': '1',
              'text-decoration': '',
              'font-weight': '',
              'font-style': '',
              'letter-spacing': '1px'
            }
          },
          {
            'id': '1415',
            'type': '3',
            'content': '美   丽                 是   一  种    充   满\n活力的艺术',
            'image': '',
            'status': '1',
            'vertical_align': 'middle',
            'basic': {
              'x': '134px',
              'y': '132px',
              'w': '300px',
              'h': '100px',
              'z_index': '1',
              'color': '#ffffff',
              'font_size': '31px',
              'line_height': '40px',
              'text_align': 'left'
            },
            'customize': {
              'rotate': '0',
              'opacity': '1',
              'text-decoration': '',
              'font-weight': '',
              'font-style': '',
              'letter-spacing': '1px'
            }
          },
          {
            'id': '1416',
            'type': '0',
            'content': '2018',
            'image': '',
            'status': '1',
            'vertical_align': 'center',
            'basic': {
              'x': '580px',
              'y': '187px',
              'w': '67px',
              'h': '21px',
              'z_index': '1',
              'color': '#ffffff',
              'font_size': '25px',
              'line_height': '40px',
              'text_align': 'left'
            }
          },
          {
            'id': '1417',
            'type': '0',
            'content': '一个  精  致 的  女人，   最起                                 码懂    得取悦自己',
            'image': '',
            'status': '1',
            'vertical_align': 'center',
            'basic': {
              'x': '0px',
              'y': '977px',
              'w': '750px',
              'h': '28px',
              'z_index': '1',
              'color': '#ffffff',
              'font_size': '29px',
              'line_height': '40px',
              'text_align': 'center'
            },
            'customize': {
              'rotate': '0',
              'opacity': '1',
              'text-decoration': '',
              'font-weight': '',
              'font-style': '',
              'letter-spacing': '2px'
            }
          },
          {
            'id': '1414',
            'type': '1',
            'content': 'http://app.mmtcapp.com/static/upload/image/20181101/20181101142740_99230.jpg',
            'image': 'http://app.mmtcapp.com/static/upload/image/20181101/20181101142740_99230.jpg',
            'status': '1',
            'vertical_align': '',
            'basic': {
              'x': '120px',
              'y': '251px',
              'w': '510px',
              'h': '690px',
              'z_index': '1',
              'color': '',
              'font_size': '',
              'line_height': '',
              'text_align': 'center'
            },
            'customize': {
              'rotate': '0',
              'opacity': '1',
              'background-color': '',
              'border-width': '1px',
              'border-color': '',
              'border-style': '',
              'border-radius': '0px'
            }
          },
          {
            'id': '1413',
            'type': '2',
            'content': 'https://app.mmtcapp.com/nodeapi/qrcode/shop_home?id=8662',
            'image': 'http://app.mmtcapp.com/static/upload/image/20181101/20181101142701_80521.jpg',
            'status': '1',
            'vertical_align': '',
            'basic': {
              'x': '317px',
              'y': '1059px',
              'w': '116px',
              'h': '116px',
              'z_index': '1',
              'color': '',
              'font_size': '',
              'line_height': '',
              'text_align': 'center'
            },
            'customize': {
              'rotate': '0',
              'opacity': '1',
              'background-color': '',
              'border-width': '1px',
              'border-color': '',
              'border-style': '',
              'border-radius': '0px'
            },
            'tip': '替换此店铺二维码?',
            'tip2': '用户扫码即可进入您的店铺小程序'
          }
        ],
        placeholderPic: 1,
        posterWidth: 300,
        scaleWidth: this.scale,
        posterHeight: 456,
        maxPosterHeight: 667,
        scrollBoxHeight: 667,
        scale: defaultScale,
        isLocking: true,
        draggableGroup: null,
        keyboard: {
          height: 312,
          status: 0
        },
        draggableObj: {
          width: 0.1,
          height: 0.1,
          top: 0.1,
          left: 0.1,
          bbox: {},
          rbox: {},
          transform: {},
          id: '',
          node: null
        }
      }
    },
    computed: {
      ...mapState({})
    },
    inject: ['appRefresh', 'isMerchantH5'],
    beforeCreate () {
      this.socket && this.socket.close()
    },
    created () {
      let $ = this.util.Zepto
      let that = this
      let obj = {}
      if (config.NODE_ENV === 'production') {
        obj.path = '/nodeapi/socket.io'
      }
      let socket = that.socket = io(`${config.host}/wsFonts`, obj)
      // 加入房间
      socket.on('connect', function () {
        that.$toast.message('socket连接成功')
        that.SVG_JS()
      })
      // that.util.getScriptLoad('/static/libs/bower_modules/svg.draggable.js/dist/svg.draggable.min.js', true)
      if (device.mobile()) {
        $(document).focusin(function () {
          let keyboard = that.keyboard
          //软键盘弹出的事件处理
          // alert('软键盘弹出的事件处理')
          that.keyboard.status > 0 && $(window).scrollTop(that.keyboard.top || 0)
          $(document).on('scroll', function () {
            if (that.keyboard.status > 0) {
              $(window).scrollTop(that.keyboard.top || 0)
            } else {
              clearTimeout(ScrollTimer)
              ScrollTimer = setTimeout(function () {
                if (keyboard.status === 0) {
                  that.keyboard.height = $(this).scrollTop()
                }
                that.keyboard.status++
                $(window).scrollTop(that.keyboard.top || 0)
                document.title = `高度：${that.keyboard.height},次数：${that.keyboard.status}`
              }, 300)
            }
          })
        })
        $(document).focusout(function () {
          //软键盘收起的事件处理
          alert('软键盘收起的事件处理')
        })
      }
      this.$nextTick(async function () {

      })
      $(window).resize(function () {
        that.handleResize(true)
        if (!that.$device.isAndroid) {
          window.setTimeout(function () {
            window.scrollTo(0, document.body.clientHeight)
          }, 500)
        }
      })
    },
    destroyed () {
      this.socket && this.socket.close()
    },
    methods: {
      async SVG_JS () {
        let that = this
        let $ = that.util.Zepto
        if (!SVG.supported) {
          alert('当前浏览器SVG不受支持，请更换浏览器使用！！！')
          return
        }
        let scale = that.scale
        let model = that.model
        let dom = $(that.$el)
        let canvas = dom.find('#posterCanvasContainer')
        let scrollBox = dom.find('.azm-scroll')
        await that.handleResize(true)
        that.scrollBoxHeight = scrollBox.height()
        let draw = SVG('posterSvg')

        let group = draw.group().addClass('svgPosterGroup')
        if (model.background) {
          group.add(await that.drawModelImage(draw))
        }
        let configList = that.configList

        function compare (property) {
          return function (a, b) {
            let value1 = 0
            let value2 = 0
            try {
              value1 = eval('a.' + property)
              value2 = eval('b.' + property)
            } catch (err) {
              // console.log(err, a, b)
            }
            return value1 - value2
          }
        }

        // 元素排序
        configList.sort(compare('basic.z_index'))
        let arr = []
        for (let v of configList) {
          setTimeout(function () {
            if ('0, 3'.indexOf(v.type) > -1) {
              let textGroup = that.drawSvgText(draw, v)
              // group.add(itemGroup);
              group.add(textGroup)
              arr.push(textGroup)
            } else if ('1,2'.indexOf(v.type) > -1) {
              let imageGroup = that.drawSvgImage(draw, v)
              group.add(imageGroup)
              arr.push(imageGroup)
            } else {

            }
          })
        }
        let obj = {
          cx: 375,
          cy: 29.725000381469727,
          h: 59.45000076293945,
          height: 59.45000076293945,
          w: 750,
          width: 750,
          x: 0,
          x2: 750,
          y: 977,
          y2: 59.45000076293945
        }
        // let G = draw.group().id('svgPosterDraggableGroup').move(obj.x, obj.y)
        // let nested = G.nested().id(null).size(obj.w, obj.h).viewbox(`0,0,${obj.w},${obj.h}`)
        // // let polyline = draggableGroup.polyline(`0,0 ${obj.w},0 ${obj.w},${obj.h} 0,${obj.h} 0,0`)
        // // polyline.fill('none')
        // // polyline.stroke({color: '#fff', width: 2, linecap: 'round', linejoin: 'round'})
        // let rect = nested.rect(obj.w, obj.h).fill('transparent')
        //   .stroke({
        //     color: '#fff',
        //     width: 2,
        //     linecap: 'round',
        //     linejoin: 'round'
        //   })
        //
        // let circle = 8
        // let block = 4
        //
        // let circleGroup = nested.group().move(-circle, -circle)
        // circleGroup.rect(circle * 5, circle * 5).opacity(0).move(0, 0)
        // let circleEle = circleGroup.circle(circle * 2).fill('#fff').move(0, 0) //左上角
        // // circleGroup.clone().move(obj.w - circle, -circle) //右上角
        // // circleGroup.clone().move(obj.w - circle, obj.h - circle) //右下角
        // // circleGroup.clone().move(-circle, obj.h - circle) //左下角
        // let blockLen = 30
        // let blockY = (obj.h - blockLen) / 2
        // let blockEle = nested.rect(block * 2, blockLen).radius(block).fill('#fff').move(-block, blockY)
        // blockEle.clone().move(obj.w - block, blockY)
        // let transform = G.transform()
        // let x = transform.x
        // let y = transform.y
        // G.draggable()
        //   .on('beforedrag', function (e) {
        //     e.preventDefault()
        //     // no other events are bound
        //     // drag was completely prevented
        //   })
        //   .on('dragstart', function (e) {
        //     e.preventDefault()
        //     let transform = G.transform()
        //     x = transform.x - e.detail.p.x
        //     y = transform.y - e.detail.p.y
        //     console.log(x, y, 'dragstart')
        //   })
        //   .on('dragmove', function (e) {
        //     e.preventDefault()
        //     this.move(x + e.detail.p.x, y + e.detail.p.y)
        //     // events are still bound e.g. dragend will fire anyway
        //     // 事件仍受约束，例如dragend无论如何都会开枪
        //   })
        //   .on('dragend', function (e) {
        //     e.preventDefault()
        //     let transform = G.transform()
        //     x = transform.x - e.detail.p.x
        //     y = transform.y - e.detail.p.y
        //   })
        //
        // let circleStart = {
        //   x: 0,
        //   y: 0,
        //   w: nested.width(),
        //   h: nested.height()
        // }
        //
        // circleGroup.draggable()
        //   .on('beforedrag', function (e) {
        //     e.preventDefault()
        //     // no other events are bound
        //     // drag was completely prevented
        //   })
        //   .on('dragstart', function (e) {
        //     e.preventDefault()
        //     let transform = G.transform()
        //
        //     circleStart.x = e.detail.p.x
        //     circleStart.y = e.detail.p.y
        //     console.log(x, y, 'dragstart')
        //   })
        //   .on('dragmove', function (e) {
        //     e.preventDefault()
        //     // G.move(x + e.detail.p.x, y + e.detail.p.y)
        //
        //     let xBl = circleStart.x / e.detail.p.x
        //     let yBl = circleStart.y / e.detail.p.y
        //
        //     console.log(xBl, yBl, '+++++++++++++')
        //
        //     let group = SVG.get('svgPosterDraggableGroup')
        //     let bbox = group.bbox()
        //     if (Math.abs(xBl) > 2 || Math.abs(yBl) > 2) return
        //     if (Math.abs(xBl) > Math.abs(yBl)) {
        //       group.scale(xBl, xBl)
        //     } else {
        //       group.scale(yBl, yBl)
        //     }
        //
        //     // if (e.detail.p.x > e.detail.p.y) {
        //     //   nested.size(obj.w - e.detail.p.x, obj.h - e.detail.p.x)
        //     // } else {
        //     //   nested.size(obj.w - e.detail.p.y, obj.h - e.detail.p.y)
        //     // }
        //     // events are still bound e.g. dragend will fire anyway
        //     // 事件仍受约束，例如dragend无论如何都会开枪
        //   })
        //   .on('dragend', function (e) {
        //     e.preventDefault()
        //     let transform = G.transform()
        //     x = transform.x - e.detail.p.x
        //     y = transform.y - e.detail.p.y
        //   })
      },
      // 绘制背景图
      async drawModelImage (draw) {
        let that = this
        let model = that.model
        model.svgDrow = {}
        const parentGroup = await draw.group().rotate(0).attr({'data-type': 'model'}).style({opacity: 1})
        const hoveMoveGroup = await draw.group()
        const svgGroup = await draw.group()
        parentGroup.addClass('parentGroup')
        parentGroup.add(hoveMoveGroup.add(svgGroup))
        let id = svgGroup.attr('id')
        // 绘制文字SVG盒子
        let pathDraw = await SVG(id).size(model.w, model.h).viewbox(0, 0, model.w, model.h).style({
          top: 0,
          left: 0
        })
        model.svgDrow.parentNode = pathDraw
        await svgGroup.add(pathDraw)
        // 绘制透明矩形
        const rect = await pathDraw.rect(model.w, model.h).attr({opacity: 0})
        rect.addClass('modelRect')
        model.svgDrow.childModelRect = rect
        let url = model.background
        if (/(:3000)/ig.test(PROXY_URL) || location.origin !== config.host) {
          url = PROXY_URL + encodeURIComponent(model.background)
        }
        const group = pathDraw.group()
        group.addClass('modelGroup')

        let modelGroup = pathDraw.image(url, model.w, model.h)
        group.add(modelGroup)
        await pathDraw.attr({fill: model.backgroundColor})
        return parentGroup
      },
      // 绘制图片元素
      drawSvgImage (draw, item = {}) {
        let that = this
        let model = that.model
        let style = {...Deploy2style.basisFilter(item.basic), ...Deploy2style.basisFilter(item.customize)}
        for (let k in style) {
          let val = style[k]
          if (Deploy2style.isPixel(val) || /^-?\d{0,}.?\d+$/ig.test(val)) {
            style[k] = parseFloat(val)
          }
        }
        item.style = style
        const parentGroup = draw.group().attr({'data-type': +item.type === 2 ? 'qrcode' : 'image'}).style({opacity: 1})
        const hoveMoveGroup = draw.group()

        if (+item.status === 1) {
          hoveMoveGroup.addClass('hoveMove')
        }
        const svgGroup = draw.group()
        parentGroup.x(item.style.x).y(item.style.y).addClass('parentGroup')
        parentGroup.add(hoveMoveGroup.add(svgGroup))
        const id = svgGroup.attr('id')
        // 绘制文字SVG盒子
        const pathDraw = SVG(id).size(style.width, style.height).viewbox(0, 0, style.width, style.height).style({
          top: 0,
          left: 0
        })
        svgGroup.add(pathDraw)
        // 绘制透明矩形
        const rect = pathDraw.rect(style.width, style.height).attr({opacity: 0})
        rect.addClass(+item.type === 2 ? 'qrcodeRect' : 'imageRect')
        const group = pathDraw.group()
        group.addClass(+item.type === 2 ? 'qrcodeGroup' : 'imageGroup')
        if (+item.type === 2) {
          let image = item.image
          if (/(:3000)/ig.test(PROXY_URL) || location.origin !== config.host) {
            image = PROXY_URL + encodeURIComponent(image)
          }
          let id = group.attr('id')
          that.util.getScriptLoad('https://app.mmtcapp.com/js/qrcode/qrcode.min.js', 'QRCode', function (QRCode) {
            if (QRCode) {
              const qrcode = new QRCode(document.getElementById(id), {
                width: style.width * 2,
                height: style.width * 2,
                useSVG: true
              })
              $(`#${id}`).find('img').on('load', function () {
                let qrcodeGroup = pathDraw.image($(this)[0].src).loaded(function (loader) {
                  const w = loader.width / 2 * 0.8
                  const h = loader.height / 2 * 0.8
                  this.size(w, h)
                  const x = (style.width - w) / 2
                  const y = (style.width - w) / 2
                  this.move(x, y)
                  rect.opacity(1)
                  rect.fill(style.backgroundColor || '#fff')
                  pathDraw.image('/static/favicon.ico').loaded(function (loader) {
                    const w = style.width * 0.2
                    const h = style.width * 0.2
                    this.size(w, h)
                    const x = (style.width - w) / 2
                    const y = (style.width - w) / 2
                    this.move(x, y)
                  })
                })
                group.add(qrcodeGroup)
              })
              qrcode.makeCode(item.content)
            }
          })
        } else {
          let content = item.content
          if (/(:3000)/ig.test(PROXY_URL) || location.origin !== config.host) {
            content = PROXY_URL + encodeURIComponent(content)
          }
          let imageGroup = pathDraw.image(content, style.width, style.height)
          group.add(imageGroup)
        }
        if (+item.type === 2)
          pathDraw.fill(style.backgroundColor || '#fff')
        else
          pathDraw.fill(style.backgroundColor)
        // 元素旋转
        parentGroup.rotate(style.rotate || 0)
        return parentGroup
      },
      // 绘制文字元素
      drawSvgText (draw, item = {}) {
        let that = this
        let model = that.model
        let style = {
          ...Deploy2style.basisFilter(item.basic),
          ...Deploy2style.basisFilter(item.customize)
        }
        for (let k in style) {
          let val = style[k]
          if (Deploy2style.isPixel(val) || /^-?\d{0,}.?\d+$/ig.test(val)) {
            style[k] = parseFloat(val)
          }
        }
        item.style = style
        let content = item.content
        let txtWidth = item.style.width / TEXT_SCALE
        if (txtWidth - item.style.width > 50) {
          txtWidth = item.style.width + 50
        }
        txtWidth = Math.round(txtWidth * 100) / 100
        if (txtWidth >= this.model.w) {
          txtWidth = that.model.w
        }
        let txtHeight = Math.round(item.style.height * 1.2 * 100) / 100
        // if (txtHeight / 1.2 <= style.fontSize) {
        //   style.fontSize = txtHeight / 1.2
        // }
        // console.log(item.style, item.type, content)

        const parentGroup = draw.group().rotate(0).attr({'data-type': 'text'}).style({opacity: 1})
        const hoveMoveGroup = draw.group()
        if (+item.status === 1) {
          hoveMoveGroup.addClass('hoveMove')
        }
        const svgGroup = draw.group()
        parentGroup.x(item.style.x).y(item.style.y).addClass('parentGroup')
        parentGroup.add(hoveMoveGroup.add(svgGroup))
        // 绘制文字SVG盒子
        let pathDraw = draw.nested().size(txtWidth, txtHeight).viewbox(0, 0, txtWidth, txtHeight).style({
          top: 0,
          left: 0,
          overflow: 'hidden'
        })
        svgGroup.add(pathDraw)
        // 绘制透明矩形
        const rect = pathDraw.rect().attr({opacity: 0})
        rect.addClass('modelRect')
        // item.style.color
        pathDraw.fill(item.style.color || 'transparent')
        // pathDraw.stroke({color: '#f06', opacity: 0.6, width: 2})
        // that.$ajax.getFontsPath({
        //   txt: content,
        //   fontSize: style.fontSize,
        //   fontFamily: '方正字迹-新手书'
        // }).finally(res => {
        //   if (res && res.status === 1 && res.info) {
        //     item.fontPaths = res.info.fontPaths;
        //     item.fonts = res.info.fonts;
        //     that.fontGroup(pathDraw, item);
        //   }
        // });
        that.socket.emit('getFontsPath', {
          txt: content,
          fontSize: style.fontSize,
          fontFamily: '方正字迹-新手书'
        }, function (data) {
          if (data.status === 1 && data.info) {
            item.fontPaths = data.info.fontPaths
            item.fonts = data.info.fonts
            console.log(...data.info.fontPaths, ...data.info.fonts, 'sjfjafsjl')
            that.fontGroup(pathDraw, item)
            // console.log(textGroupH, item.content)
            let bbox = pathDraw.bbox()
            txtHeight = Math.round(bbox.height * 1.2 * 100) / 100
            rect.size(txtWidth, txtHeight)
            pathDraw.size(txtWidth, txtHeight).viewbox(0, 0, txtWidth, txtHeight)
            that.util.dynamicStatic.loadCss(data.info.path)
          }
        })
        // 元素旋转
        parentGroup.rotate(style.rotate || 0)
        parentGroup.on('click', function () {
          let doms = this.select('g.hoveMove')
          if (!doms || !doms.members || doms.members.length === 0) return
          this.addClass('active')
          // doms.socket

          let rbox = parentGroup.rbox()
          let obj = {
            bbox: {...parentGroup.bbox()},
            rbox: {...rbox},
            transform: {...parentGroup.transform()},
            id: parentGroup.id(),
            node: parentGroup,
            width: rbox.width,
            height: rbox.height,
            left: rbox.x,
            top: rbox.y,
          }
          that.editShow = true
          that.$nextTick(function () {
            that.draggableObj = {...that.draggableObj, ...obj}
          })
          console.log(obj, 'dddd')
          // parentGroup.draggable()
          //   .on('beforedrag', function (e) {
          //     e.preventDefault()
          //     // no other events are bound
          //     // drag was completely prevented
          //   })
          //   .on('dragstart', function (e) {
          //     e.preventDefault()
          //     let transform = parentGroup.transform()
          //     x = transform.x - e.detail.p.x
          //     y = transform.y - e.detail.p.y
          //   })
          //   .on('dragmove', function (e) {
          //     e.preventDefault()
          //     this.move(x + e.detail.p.x, y + e.detail.p.y)
          //
          //     console.log(this.rbox(), '7678')
          //     // events are still bound e.g. dragend will fire anyway
          //     // 事件仍受约束，例如dragend无论如何都会开枪
          //   })
          //   .on('dragend', function (e) {
          //     e.preventDefault()
          //     let transform = parentGroup.transform()
          //     x = transform.x - e.detail.p.x
          //     y = transform.y - e.detail.p.y
          //   })
        })

        return parentGroup
      },
      fontGroup (draw, item) {
        let that = this
        let style = item.style
        let wordSpacing = 0
        let lineSpacing = 0
        let spaceWidth = style.fontSize / 3
        let txtWidth = item.style.width / TEXT_SCALE
        if (txtWidth - item.style.width > 50) {
          txtWidth = item.style.width + 50
        }
        txtWidth = Math.round(txtWidth * 100) / 100
        if (txtWidth >= that.model.w) {
          txtWidth = that.model.w
        }
        let txtHeight = Math.round(item.style.height * 1.2 * 100) / 100
        if (Array.isArray(item.fontPaths) && item.fontPaths.length > 0) {
          for (let index = 0; item.fontPaths.length > index; index++) {
            let elem = item.fontPaths[index]
            let group = draw.group()
            group.addClass('textGroup')
            let txtPaths = []
            let flag = false
            let exceeds = []
            let singleLineWidth = 0
            for (let i = 0; elem.length > i; i++) {
              let v = elem[i]
              // 绘制文字
              let tBbox = new SVG.PathArray(v)
              let bbox = tBbox.bbox()
              tBbox.move(0, bbox.y)
              if (i > 0) {
                tBbox.move(singleLineWidth + wordSpacing, bbox.y)
                singleLineWidth += wordSpacing
              }
              if (that.util.trim(item.fonts[index][i]) === '') {
                singleLineWidth += spaceWidth
              } else {
                singleLineWidth += bbox.width + 2
              }
              // console.log(singleLineWidth, spaceWidth, item.fonts[index][i], that.util.trim(v) === '')
              bbox = tBbox.bbox()
              flag = singleLineWidth >= style.width
              let txt_y = singleLineWidth - style.width
              if (flag) {
                if (that.util.trim(item.fonts[index][i]) === '') {
                  exceeds.push('')
                } else {
                  exceeds.push(tBbox.move(txt_y, bbox.y).toString())
                }
                //超出宽度路径
                // console.log(elem.splice(i, elem.length - 1))
                // item.fontPaths.splice(index, 0, elem.splice(i, elem.length - 1))
                //超出宽度文字
                // console.log(item.fonts[index].splice(i, elem.length - 1))
                // item.fonts.splice(index, 0, item.fonts[index].splice(i, elem.length - 1))
                // break
              } else {
                // console.log(bbox.x, bbox.width, txtPath.width(), spaceNum, item.fonts[index][i], style.fontSize / 2)
                // if (bbox.width + txtPath.width() + (style.fontSize / 2 * spaceNum) >= txtWidth) {
                //   console.log(bbox, txtWidth, '超出宽度', item.fonts[index][i], txtPath.width(), style.fontSize / 2 * spaceNum, style.fontSize)
                // }
                // if (!that.util.trim(item.fonts[index][i])) {
                //   spaceNum++
                // } else {
                //   spaceNum = 0
                // }
                let txtPath = group.path(tBbox.toString()).data('value', item.fonts[index][i])
                txtPaths.push(txtPath)
              }
            }
            item.fontPaths[index].splice(-exceeds.length)
            if (exceeds.length > 0) {
              item.fonts.splice(index + 1, 0, item.fonts[index].splice(-exceeds.length))
              item.fontPaths.splice(index + 1, 0, exceeds)
            }
            let bbox = group.bbox()
            let text_x = 0
            let text_y = Math.round(draw.bbox().h * 100) / 100
            if (index > 0) {
              text_y = Math.round((draw.bbox().h + lineSpacing) * 100) / 100
            }
            let text_w = bbox.width
            let text_h = bbox.height
            // 居中布局
            if (style.textAlign === 'center') {
              text_x = (txtWidth - text_w) / 2
            } else if (style.textAlign === 'right') {
              text_x = txtWidth - text_w
            }
            // console.log(text_x, '文字宽度', item.fonts[index].join(''), bbox)
            // console.log(txtHeight, '文字高度', txtHeights)
            group.translate(text_x, text_y)
          }
        }
        return draw.bbox()
      },
      // 鼠标滚轮事件
      handleMousewheel (e) {
        let that = this
        // console.log(e, '鼠标滚轮事件');
        if (e.deltaY > 0) {
          this.scale -= 1
        } else {
          this.scale += 1
        }
        // setTimeout(function () {
        //   that.handleResize(true)
        // }, 300)
      },
      handleResize (bol) {
        // this.$toast.message(9090);
        let that = this
        const $ = this.util.Zepto
        const dom = $(this.$el)
        dom.height($(window).height())
        const container = dom.find('#posterCanvasContainer')
        const azmScrollBox = dom.find('.azm-scroll')
        const model = this.model
        if (!model.h || !model.w) {
          return
        }
        const aspectRatio = model.w / model.h
        let scaleWidth = this.scale
        if (scaleWidth < 10 || scaleWidth > 100) {
          scaleWidth = scaleWidth < 10 ? 10 : 100
        }
        let posterWidth = 0
        let azmScrollWidth = azmScrollBox.width() * (scaleWidth / 100)
        let azmScrollHeight = azmScrollBox.height() * 0.9
        that.maxPosterHeight = azmScrollHeight
        // console.log(azmScrollWidth, azmScrollHeight, '父盒子');
        let posterHeight = azmScrollWidth / aspectRatio
        // console.log(posterHeight, bol, 'svg盒子高度');
        if (posterHeight > azmScrollHeight && bol === true) {
          posterWidth = azmScrollHeight * aspectRatio
          defaultScale = scaleWidth = Math.round(posterWidth / azmScrollBox.width() * 100)
          // if (defaultScale < 70) {
          //   scaleWidth = 70
          // }
        } else {
          posterWidth = azmScrollWidth
        }
        // console.log(scaleWidth, posterWidth, posterHeight, '百分比:宽：高');
        this.scaleWidth = scaleWidth
        this.posterHeight = posterHeight
        this.posterWidth = posterWidth
        this.scale = scaleWidth
      },
      handleScroll (e) {
        // console.log(e);
        // if (defaultHeightStatus) {
        //   defaultHeightStatus = false;
        //   this.posterHeight++;
        // } else {
        //   defaultHeightStatus = true;
        //   this.posterHeight--;
        // }
      }
    }
  }
</script>

<style scoped lang="less">
  * {
    box-sizing: border-box;
  }

  .azm-poster-canvas {
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-direction: column;

    .posterModel2 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: transparent;
      z-index: 1000;
    }

    .posterModel {
      position: fixed;
      /*top: 50%;*/
      /*left: 50%;*/
      /*transform: translate(-50%, -50%);*/
      /*width: 100%;*/
      /*height: 100%;*/
      background: transparent;
      z-index: 1000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;

      .azm-poster-draggable {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border: 1px solid #fff;
      }
    }

    #posterCanvasContainer {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .azm-scroll {
      position: relative;
      flex: 1;
      touch-action: auto;
      overflow: hidden;
    }

    footer {
      box-sizing: border-box;
      padding: 10px 0;
      height: 45px;
      line-height: 45px;
      text-align: center;
      background-color: #fff;
      vertical-align: middle;
    }

    #posterCanvasContainer, .posterCanvasContainer {
      width: 80%;
      margin: 0 auto;
      background-color: transparent;
      text-align: center;
    }

    @media screen and (min-width: 500px) {
      #posterCanvasContainer, .posterCanvasContainer {
        width: 100%;
      }
    }
    /*.posterCanvasContainer {*/
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*z-index: 100;*/
    /*background-color: rgba(0, 0, 0, .3);*/
    /*}*/
  }


</style>
<style lang="less">
  html.html-poster_svg {
    position: fixed;
    /*z-index: 10000000;*/
    user-select: none;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

    body, #app {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  }

  .azm-poster-canvas {
    /*.__vuescroll {*/
    /*.__panel.__slide {*/
    /*padding: 10px 0;*/
    /*}*/
    /*}*/

    .hoveMove {
      cursor: move;
    }

    svg:not(:root), symbol, image, marker, pattern, foreignObject {
      overflow: hidden;
    }

    footer {

    }
  }
</style>
